<template>
  <div class="ai-summary">
    <div v-if="summary.length">
      <div class="text-14px color-#172b4d mb-10px"
        >根据此客户在[{{ formatDate(createTime) }}]的最后一次外呼记录,AI帮您摘要出以下内容</div
      >
      <el-descriptions ref="detailRef" border :column="1">
        <el-descriptions-item :label="item.name" :key="index" v-for="(item, index) in summary">{{
          item.value
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="color-#6b778c text-14px text-center" v-else> 没有更多了 </div>
  </div>
</template>

<script setup>
import { formatDate } from '@/utils/formatTime'
import { RecordApi } from '@/api/call/record'
const props = defineProps({
  clueValue: Object
})

const summary = ref([])
const createTime = ref()
/**ai摘要*/
const getAiSummary = async (lastCallId) => {
  const res = await RecordApi.getSummary(lastCallId)

  try {
    const obj = JSON.parse(res.summary)
    const result = Object.entries(obj).map(([key, value]) => ({
      name: key,
      value: value
    }))
    summary.value = result
  } catch {
    summary.value = []
  }

  createTime.value = res ? res.createTime : ''
}
watch(
  () => props.clueValue,
  (val) => {
    if (val.lastCallId) {
      getAiSummary(val.lastCallId)
    }
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
.ai-summary {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #172b4d1a;
  margin: 0 8px;
  padding: 16px;
}
</style>
